<template>
  <div class="ts-box" :class="skinInfo.backImg || skinInfo.backColor ?'ts-bg-box':''"  :style="{background : skinInfo.backImg ?'url('+skinInfo.backImg+')'  : skinInfo.backColor ? skinInfo.backColor : '#FFFFFF'}">
    <ZxyhHeader v-if="$channel=='zxyh' && getPlatform =='app'" :class="isOverlay ?'show-overlay':''" :isSearch="false"></ZxyhHeader>
     <div class="small-connect" v-if="tsList && tsList.length>0" >
    <van-tabs v-model="active" scrollspy sticky :offset-top='offsetTop' :ellipsis="false" ref="vanTabs" @scroll="scrollTop" @click.native="onClick">
      <van-tab v-for="(v,index) in tsList" :title="v.name" :key="index">
        <div class="ul-title">
          <p class="ul-title-p">{{v.name}}</p>
          <div class="more-text-div" @click="clickMoreVideo(v)" v-if="v.videoList.length>6">
            <p>更多</p>
            <Iconfont iconClass="iconfont iconyoujiantou1" />
          </div>
        </div>

        <ul class="img-poster-box">
          <li  v-for="(vl,i) in  v.videoList" v-show="i<6" @click="clickVideoPlay(vl)" :key="i" :style="{background : skinInfo.backImg || skinInfo.backColor ? 'rgba(255, 255, 255, 0.4)' : '#FFFFFF'}">
            <div class="img-box">
              <img :src="vl.bgimg+'?x-oss-process=image/resize,m_fixed,h_171,w_300'" alt />
            </div>
            <div class="text-box">
              <p class="title-box">{{vl.title}}</p>
              <p>{{vl.pvSum || 0}}观看</p>
            </div>
          </li>
        </ul>
      </van-tab>
    </van-tabs>
    <div class=" collapse-container-fixed" :style="{background:(!isOverlay?'none':'#ffffff')}">
      <ul class="collapse-list" v-show="isOverlay">
        <li v-for="(v,i) in tsList" :key="v.id" :class="{active:active==i}" @click="getNum(i)">{{v.name}}</li>
      </ul>
      <van-icon :name="isOverlay?'arrow-up':'arrow-down'" @click="btnShow" />
    </div>
    
  </div>
  <van-overlay :show="isOverlay" @click="btnShow" />
    <div class="topFixed" :style="[{backgroundImage:skinInfo.backImg?'url('+skinInfo.backImg+')':''},{backgroundColor:skinInfo.backImg?'':skinInfo.backColor?skinInfo.backColor:'#FFFFFF'},{height: isIos ?'110px':'79px'}]"></div>
  </div>
</template>

<script>
import ZxyhHeader from "../components/zxyh/zxyhHeader";
export default {
  components:{
    ZxyhHeader
		},
  data() {
    return {
      tsList:[],
      isOverlay: false,//是否出现蒙层
      active:0,  
      page: 1, //页码
      isIos,
      getPlatform:fun.getPlatform(),//app wx
      offsetTop: isIos ?74 :44,//控制粘性定位布局下与顶部的最小距离
      scroll:0,//页面滚动距离
    };
  },
  created: function() {
      fun.dotNum('freChannelHomePage');
      this.getTsList();
		},
    
  mounted() {
  },
  beforeRouteLeave(to, from, next) {
       //记录页面滚动
        if(to.path =='/zxyh/mine' || to.path =='/zxyh/zxyhHome'){
           this.scroll = 0
          this.active =0
        }else{
           this.scroll = document.getElementsByClassName( "channer-box")[0].scrollTop;
        } 
       next();
},
  activated() {
			this.$store.dispatch('showNav');
      document.getElementsByClassName( "channer-box")[0].scrollTop = this.scroll+1;//设置滚动
	},
		destroyed() {
			this.$store.dispatch('hideNav');
		},
   computed: {
      skinInfo() {
        return this.$store.state.skinStoreInfo
      }
    },
  methods: {
    // 面板列表
    getNum(i) {
       this.active = i;
       this.$refs.vanTabs.scrollTo(i)
       this.isOverlay=false
    },
    onClick(e){
      
    },
    // 右三角展示
    btnShow() {
      this.isOverlay = !this.isOverlay;
    },
    // 锚点部分滚动
    scrollTop(e) {
     
    },
      clickVideoPlay(v){//视频播放
        this.$router.push(`/${this.$channel}/liveBack/${v.vid||v.id}?dzhPage=true`)
			},
      // 更多
			clickMoreVideo(v){
        console.log(v,'clickMoreVideo')
        this.$router.push({
          path: `/${this.$channel}/telMore`,
          query:{
            id:v.id,
            title:v.name
          }
        })
      },
      // 获取特色列表
      getTsList(){    
				this.$http.get("/album/getTspdIndex?page=" + this.page + "&pageSize=10").then(
					res => {
            const {code,data} = res.data
            if(code=='000000'){
              if(data && data!=null){
                 this.tsList = [...this.tsList,...data]
                 if(data.length<10){ //数组小于10不再请求
                  // this.tipText = "没有更多数据了"
                 }else{
                   this.page++
                   this.getTsList()
                 }
              }
              
            }	
						}
			).catch(err=>{});
          },
  },
  filters: {
			filtNum(num) {
				if(!num) {
					num = 0
				} else if(num > 10000) {
					num = `${(num/10000).toFixed(1)}w`
				}
				return num
			},
		},
};
</script>

<style scoped>
.ts-box{
  min-height: 100vh;
  width: 100vw;
  padding-bottom: 60px;
  background-size: 100vw 1334px !important;
}
	::-webkit-scrollbar {
	  height: 0;
	  width: 0;
	  color: transparent;
	  display: none;
	}
  /* 新加样式
	 */
.ul-title {
  width: 100%;
  height: 88px;
  display: flex;
  padding: 0 32px;
}
.ul-title .ul-title-p {
  display: flex;
  align-items: center;
  color: rgba(51, 53, 68, 1);
  font-size: 34px;
  font-weight: 500;
  line-height: 88px;
  flex: 9;
}
.more-text-div {
  flex: 2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: rgba(121, 121, 121, 1);
  font-size: 26px;
  
}
/* .ul-title .ul-title-p:before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 30px;
  margin-right: 14px;
  background: #8d11bd;
  border-radius: 2px;
  vertical-align:text-top;
} */
.img-poster-box {
  width: calc(100vw - 64px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.img-poster-box li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 20px;
  border-radius: 24px;
}

.img-box {
  width: 382px;
  height: 214px;
  margin-right: 20px;
  border-radius: 24px;
}
.img-box img {
  width: 100%;
  height: 100%;
  border-radius: 24px;
}
.text-box{
  flex: 1;
}
	.text-box .title-box{
		width: 100%;
  height: 140px;
  padding-right: 10px;
  padding-top: 20px;
  margin-bottom: 20px;
  text-overflow:ellipsis;
  display: -webkit-box;
 -webkit-box-orient: vertical;
  -webkit-line-clamp:3;
  overflow: hidden;
  font-size: 28px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  line-height: 42px; 
}
.text-box p{
  font-size: 24px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
}
.text-box p:last-of-type{
  display: flex;
  align-items: center;
}
.text-box p i{
  display: inline-block;
  height: 32px;
  width: 32px;
  margin-right: 8px;
  background: url('../assets/images/zxyh/scan.png') no-repeat;
  background-size: 100% 100%;
  vertical-align: bottom;
}
::-webkit-scrollbar {
  height: 0;
  width: 0;
  color: transparent;
  display: none;
}
.van-tabs--line /deep/ .van-tabs__wrap {
  position: fixed;
  height: 70px;
  width: calc(100vw - 8px);
  padding-left: 20px;
  padding-right: 70px;
  z-index: 1;
}
/* .van-tabs--line /deep/ .van-tabs__wrap:after{
  position: absolute;
  top: 0;
  right: 50px;
  content: '';
  height: 100%;
  width: 140px;
  background: linear-gradient(to right,hsla(0.8,0%,100%,0),#ffffff);
  -webkit-filter:blur(6px);
  -moz-filter: blur(6px);
  -ms-filter:blur(6px);
  fliter:blur(6px); 
  pointer-events: none;
} */

.header-conatiner-zxyhIos + .small-connect .van-tabs--line /deep/ .van-tabs__wrap{
  /* height: 240px; */
}
.small-connect{
  position: relative;
  top: 88px;
}
.header-conatiner-zxyhIos + .small-connect{
  top: 148px;
}
.collapse-container {
  position: absolute;
  right: 0;
  top: 0;
  padding-right: 30px;
  padding-top: 13px;
  background: #ffffff;
  display: flex;
  z-index: 102;
}
.collapse-container-fixed {
  position: fixed;
  right: 0;
  top:88px;
  padding-right: 24px;
  padding-top: 13px;
  background: #ffffff;
  display: flex;
  z-index: 4;
}
.collapse-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: calc(100vw - 60px);
  padding-left: 20px;
  padding-bottom: 10px;
}
.collapse-list li {
  width: auto;
  padding: 8px 20px 0;
  text-align: center;
  margin-bottom: 20px;
  line-height: normal;
  font-size: 28px;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
}
.collapse-list li.active {
  font-weight: 500;
  color: #D60110;;
}
.van-icon {
  /* padding-top: 4px; */
  font-size: 40px;
  color: rgba(102, 102, 102, 1);
}
.van-icon-arrow-up{
  padding-top: 10px; 

}
.van-tabs--line /deep/ .van-hairline--top-bottom::after,
.van-tabs--line /deep/ .van-tabs__line {
  display: none;
}
.small-connect /deep/ .van-tab span {
  padding: 9px 28px;
  line-height:normal;
  font-size: 26px;
}
.small-connect /deep/ .van-tab {
  flex-basis: auto !important;
  margin-right: 10px;
  align-items: start;
}
.small-connect /deep/ .van-tab span{
  border: 1px solid #E6E6E6;
  border-radius: 29px;
  background-color: rgba(255, 255, 255, 1);
}
.small-connect /deep/ .van-tab.van-tab--active span {
  color: rgba(214, 1, 16, 1);
  font-weight: 500;
  background-color: rgba(255, 255, 255, 0.69);
}
.ts-bg-box /deep/ .van-tab span{
  background-color: rgba(255, 255, 255, 0.49);
}
  .van-overlay{
    z-index: 2;
    background: rgba(0,0,0,.39);
  }
  .header-box {
		margin-top: 40px;
	}
 .ts-box >>> .van-sticky--fixed, .ts-box >>> .van-sticky{
   top: 88px!important;
  }
  .header-conatiner,.header-conatiner-zxyhIos{
    position: fixed;
    top: 0;
    z-index: 4;
  }
  .ts-box >>>.show-overlay .header-box,.ts-box >>>.show-overlay.header-conatiner-zxyhIos .header-empty{
    background-color: #ffffff!important;
  }
   .ts-box >>>.header-box,.ts-box >>>.van-tabs__nav{
    background: none!important;
  }
  .ts-box >>>.van-sticky{
    position: fixed;
    top: 88px;
    right: 0;
    left: 0;
    z-index: 3;
  }
  .header-conatiner-zxyhIos + .small-connect >>>.van-sticky,
  .header-conatiner-zxyhIos + .small-connect >>>.collapse-container-fixed{
    top: 148px!important;
  }
  .ts-box >>> .van-tabs__content{
     padding-top: 70px;
     padding-bottom:100px;
  }
  .ts-box .header-conatiner-zxyhIos + .small-connect  >>> .van-tabs__content{
    padding-bottom:120px;
  }
  .ts-box >>> .header-conatiner-zxyhIos .header-empty{
    background: none!important;
  }
  .topFixed{
    position: fixed;
    top: 0;
    width: 100%;
    background-size: 100vw 100vh;
    background-position: 0px 0px;
  }
</style>
